// PullPickerView.js

'use strict';

import React, {Component} from "react";
import PropTypes from 'prop-types';
import {View, ScrollView} from 'react-native';

import Theme from 'teaset/themes/Theme';
import Overlay from 'teaset/components/Overlay/Overlay';
import Label from 'teaset/components/Label/Label';
import PullPickerItem from 'teaset/components/PullPicker/PullPickerItem';
import Button from 'teaset/components/Button/Button';

export default class PullMultiPickerView extends Overlay.PullView {

    static propTypes = {
        ...Overlay.PullView.propTypes,
        title: PropTypes.string,
        items: PropTypes.array.isRequired,
        selectedIndexes: PropTypes.array,
        getItemText: PropTypes.func, //(item, index) return display text of item, item=items[index], use item when it's null
        onSelected: PropTypes.func, //(item, index)
    };

    static Item = PullPickerItem;

    constructor(props) {
        super(props);
        this.state = {...this.state, selectedIndexes: props.selectedIndexes || []}
    }

    onItemPress(itemIndex) {
        if (this.state.selectedIndexes.indexOf(itemIndex) >= 0 ){
            this.state.selectedIndexes.splice(this.state.selectedIndexes.indexOf(itemIndex), 1);
            this.forceUpdate();
        }
        else {
            this.state.selectedIndexes.push(itemIndex);
            this.forceUpdate();
        }
    }

    onConfirm() {
        let {items, onSelected} = this.props;
        this.close(true);
        onSelected && onSelected(this.state.selectedIndexes);
    }

    renderContent() {
        let {title, items, selectedIndexes, getItemText} = this.props;

        let headerRowStyle = {
            backgroundColor: Theme.pupHeaderColor,
            paddingLeft: Theme.pupHeaderPaddingLeft,
            paddingRight: Theme.pupHeaderPaddingRight,
            paddingTop: Theme.pupHeaderPaddingTop,
            paddingBottom: Theme.pupHeaderPaddingBottom,
            flexDirection:'row',
            alignItems:'center',
            justifyContent:'space-between'
        };
        let headerTextStyle = {
            color: Theme.pupHeaderTitleColor,
            fontSize: Theme.pupHeaderFontSize,
            fontWeight: Theme.pupHeaderFontWeight,
        }
        let headerSeparatorStyle = {
            backgroundColor: Theme.pupHeaderSeparatorColor,
            height: Theme.pupHeaderSeparatorHeight,
        }
        let {left: leftInset, right: rightInset} = Theme.screenInset;

        return super.renderContent(
            <View style={{backgroundColor: Theme.pupColor, maxHeight: Theme.pupMaxHeight + 100, paddingLeft: leftInset, paddingRight: rightInset}}>
                {!title ? null :
                    <View style={headerRowStyle}>
                        <Button onPress={()=>this.close(true)} title={'取消'}/>
                        <Label style={headerTextStyle} text={title} />
                        <Button onPress={()=>this.onConfirm()} disabled={this.state.selectedIndexes.length === 0} title={'确定'}/>
                    </View>
                }
                {!title ? null : <View style={headerSeparatorStyle} />}
                <ScrollView style={{backgroundColor: Theme.pupColor, flexGrow: 1}}>
                    {items && items.map((item, index) => (
                        <this.constructor.Item
                            key={'item' + index}
                            style={{backgroundColor: Theme.pupItemColor}}
                            title={getItemText ? getItemText(item, index) : item}
                            selected={selectedIndexes.indexOf(index) >= 0}
                            bottomSeparator={<View style={{backgroundColor: Theme.pupSeparatorColor, height: Theme.rowSeparatorLineWidth}} />}
                            onPress={() => this.onItemPress(index)}
                        />
                    ))}
                    <View style={{height: Theme.screenInset.bottom}} />
                </ScrollView>
            </View>
        );
    }

}

